<template>
  <yplayout>
    <template #header="props">
      <div class="flex items-center">
        <i class="ri-2x text-gray-500 ml-2 ri-emoji-sticker-line"></i>
        <div class="text-xl px-2">常用图标</div>

      </div>


    </template>
    <template #list>
      <div class="flex space-x-2 p-2">
        <div>
          <ypinput v-model="keyword" :cls="true" placeholder="名称" @keyup.enter="searchFn"></ypinput>
        </div>
        <div>
          <button class="btn" type="button" @click="searchFn">
            查询
          </button>
        </div>
        <div>
          <router-link to="add" class="btn btn-hong">增加</router-link>
        </div>

        <div class="flex-1"></div>
        <div>
          <ypselect :itemList="limitItem" v-model="limit"></ypselect>
        </div>
      </div>


      <div class="bg-white flex flex-wrap w-full">
        <div v-for="(item,index) in dataList" :key="index" class="p-2">
          <div class="w-36 h-36 flex flex-col justify-center items-center rounded-sm border hover:border-hong-300 text-hui-300 duration-300 cursor-pointer group"
            @contextmenu.prevent.stop="destory(item.id)">
          
            <div class="h-24"  @click="copy(item.name)">
              <i :class="item.name" class="ri-3x"></i>
            </div>
            <div class="group-hover:hidden">
              {{ item.title }}
            </div>
            <div @click="router.push('edit?id='+item.id)" class="hidden group-hover:block text-white bg-red-500 px-2 rounded text-xs py-0.5">
              编辑
            </div>
          </div>
        </div>


      </div>
      <div class="mt-3" v-if="pageData.pageCount>1">
        <yppage @topage="topage" :pageData="pageData" />
      </div>


    </template>
  </yplayout>
</template>
<script setup>
  import {router} from "@/router"
  import useClipboard from 'vue-clipboard3'
  import {getData,postData,alter,confirms} from "@/common/base"
  import { ref, reactive, watch, onMounted } from 'vue'
  const { toClipboard } = useClipboard()
  const dataList = reactive([])
  const keyword = ref(router.currentRoute.value.query.keyword||'')
  const limit=ref(50)
  const limitItem=reactive([
    {id:20,title:'20条'},
    {id:30,title:'30条'},
    {id:50,title:'50条'},
    {id:100,title:'100条'},
    {id:200,title:'200条'},
  ])
  watch(limit,()=>getList())

  const props = defineProps({
    mod: {
      default: 0
    },
    meta: { default: '' }
  })


  const copy = async (str) => {
    if (props.mod == 1) {
      emit('choice', str)
      return
    }
    try {
      await toClipboard(str)
      alter({ type: 'alter-success', text: '复制成功' })
    } catch (e) {
      alter({ type: 'alter-error', text: '复制失败' })
    }
  }

  //分页
  const  pageData=reactive({
    totalRecords:0,//总记录数
    pageCount:0,//总页数
    currentPage:router.currentRoute.value.query.page||1
  });
  const topage = (page) => {
    pageData.currentPage=page
    router.push('?page='+page)
    getList()
  }
  const searchFn=()=>{
    router.push('?page=1&keyword='+keyword.value)
    pageData.currentPage=1
    getList()
  }

  const destory = (id) => {
      confirms({ text: '确认删除吗？' })
      .then(async () => {
        const res= await postData('/icon/delete', { id: id })
        if (res.code) {
          alter({ type: 'alter-success', text: res.msg })
          getList()
        } else {
          alter({ type: 'alter-error', text: res.msg })
        }
      })
      .catch((e) => {})
  }
  watch(keyword, (newVal, oldVal) => {
    if (!newVal) {
      getList()
    }
  })
  const getList = async () => {
    const res= await getData('/icon', { keyword: keyword.value,page:pageData.currentPage,limit:limit.value })

    pageData.currentPage = res.data.current_page
    pageData.pageCount = res.data.last_page
    pageData.totalRecords = res.data.total
    dataList.length=0
    res.data.data.map((item) => {
      dataList.push(item)
    })

  }
  onMounted(()=>{

    getList()


  })
</script>
